<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:include="common/resource">
</head>
<title>个人主页</title>
<link rel="stylesheet" th:href="@{css/personalHomepage.css}">

<body>
<div class="app_download">
  <div class="cancel_txt">
    <span class="cancel"></span>
    <span class="txt">每个瞬间值得拥有</span>
  </div>
  <div class="download jumpApp">
    <img th:src="@{image/playLook.png}" alt="">
  </div>
</div>
<div id="wrapper">
  <div class="container">
    <div class="ltx_user_info">
      <!--头部用户信息-->
    </div>
    <div class="ltx_home_list">
      <lu class="list clearfix" id="thelist">
        <!--作品列表-->
      </lu>
      <div class="pullUp">
        <span class="loading_icon"></span>
        <span class="loading_text">加载中...</span>
      </div>
    </div>
  </div>
  <div class="ltx_navigation_box button_fixed">
    <ul class="ltx_navigation">
      <!--悬浮的头部导航-->
    </ul>
  </div>
</div>
<div class="protective_cover"></div>
</body>
<script th:src="@{js/iscroll.js}"></script>
<script type="text/html" id="userInfo">
  <div class="ltx_bg"></div>
  <div class="personal_card">
    <div class="info1">
      <div class="photo">
        <img src="{{headPortraitUrl}}" alt="">
      </div>
      <div class="botton jumpApp">
      </div>
    </div>
    <div class="info2">
      <div class="label_info">
        <span class="username">{{nickName}}</span>
        {{if cityName != ""}}
        <span class="address">{{cityName}}</span>
        {{/if}}
      </div>
      <div class="follow_info">
              <span class="follow_box">
                    <span class="num">{{focusCount}}</span>
              <span class="text">关注</span>
              </span>
        <span class="follow_box">
                    <span class="num">{{followerCount}}</span>
              <span class="text">粉丝</span>
              </span>
        <span class="follow_box">
                    <span class="num">{{beLikeCount}}</span>
              <span class="text">获赞</span>
              </span>
      </div>
    </div>
  </div>
  <div class="ltx_navigation_box">
    <ul class="ltx_navigation">
      <li class="production active">
              <span class="headline">
                      <span>作品</span>
              <span class="num">{{momentCount}}</span>
              </span>

      </li>
      <li class="like">
              <span class="headline">
                      <span>喜欢</span>
              <span class="num">{{likedCount}}</span>
              </span>
      </li>
    </ul>
  </div>
</script>
<script type="text/html" id="homeList">
  {{each momentList as value index}}
  <li class="item" data-momentId="{{value.momentId}}">
    <div class="cover" style="background-image:url('{{value.coverUrl}}')">
      <img class="play_app fr" th:src="@{image/playApp.png}" alt="">
      <div class="rank">
        <span class="fr">
        <img th:src="@{image/play.png}" class="rank_icon" alt="">
        <span class="rank_num">{{value.viewCount}}</span>
        </span>
      </div>
    </div>
  </li>
  {{/each}}
</script>
<script type="text/html" id="buttonFixed">
  <li class="production active"><span class="headline"><span>作品</span><span class="num">{{momentCount}}</span></span>
  </li>
  <li class="like"><span class="headline"><span>喜欢</span><span class="num">{{likedCount}}</span></span>
  </li>
</script>
<script>
  $(function () {
    FastClick.attach(document.body);//解决300ms点击延迟的问题iphone
    var param = {
      page: 1,
      rows: 10,
      viewType: 130,
      beViewUserId: +GetRequest().beViewUserId
    };
    var url = "huanai://ltx/user?userId=" + param.beViewUserId;
    var myscroll,
      addNum;//记录每次加载的条数
    var flag = 2;//2代表喜欢1代表作品

    load();

    // 初始化加载
    function load() {
      userInfo(param.beViewUserId);
      swipeup();
      pullOnLoad(param) //一开始加载数据；
      /**
       * 所有的点击事件
       */

      //点击导航
      $("#wrapper").on("click", ".ltx_navigation li.like", function () {
        if (flag == 2) {
          $(".button_fixed").hide();
          $('.ltx_navigation .like').addClass("active").siblings().removeClass("active")
          $(".ltx_home_list .list").html('');
          $(".pullUp").html("<span class='loading_icon'></span><span class='loading_text'>加载中...</span>");
          param.page = 1;
          param.viewType = 131;
          swipeup();
          pullOnLoad(param);
          flag = 1;
        }
      })

      $("#wrapper").on("click", ".ltx_navigation li.production", function () {
        if (flag == 1) {
          $(".button_fixed").hide();
          $('.ltx_navigation .production').addClass("active").siblings().removeClass("active");
          $(".ltx_home_list .list").html('');
          $(".pullUp").html("<span class='loading_icon'></span><span class='loading_text'>加载中...</span>");
          param.page = 1;
          param.viewType = 130;
          swipeup();
          pullOnLoad(param);
          flag = 2
        }
      })
      //列表中前三个点击跳到对应的详情页中，其余跳转到app
      $(".ltx_home_list .list").on("click ", ".item:nth-child(-n+3)", function () {
        var momentId = $(this).attr("data-momentId")
        window.location.href = "videoDetail?momentId=" + momentId
      })
      // 点击三张之后的视频跳转app
      $(document).on("click", ".item:not(:nth-child(-n+3)),.jumpApp", function () {
        var u = navigator.userAgent;
        if (/MicroMessenger/gi.test(u) || u.match(/QQ\//i) == "QQ/") {
          if (!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {//ios环境)
            $(".protective_cover").css("background-image", "url([[@{image/ios.png}]])")
          }
          $(".protective_cover").show();
          return false;
        }
        jumpApp(url);
      })
      //  去掉引导页
      $(".protective_cover").on("click", function () {
        $(this).hide();
      })
    }

    //滚动加载数据
    function swipeup() {
      if (myscroll) {
        myscroll.destroy();
        myscroll = null;
      }
      myscroll = new iScroll("wrapper", {
        onScrollMove: function () { //拉动时
          //上拉加载
          if (this.y < this.maxScrollY) {
            $(".pullUp").html("释放加载");
            $(".pullUp").addClass("loading");
          } else {
            if (addNum >= 10) {
              $(".pullUp").html("上拉加载");
              $(".pullUp").removeClass("loading");
            }
          }
        },
        onScrollEnd: function () { //拉动结束时
          // 滚动到一定的位置时出现滚动条
          var topDistance = -($(".ltx_bg").height() + $(".personal_card").height());
          if (this.y <= topDistance) {
            $(".button_fixed").show();
          } else {
            $(".button_fixed").hide()
          }

          //上拉加载
          if ($(".pullUp").hasClass('loading')) {
            if (addNum < 10) {
              $(".pullUp").html("已经没有了");
            } else {
              $(".pullUp").html("<span class='loading_icon'></span><span class='loading_text'>加载中...</span>");
              param.page += 1
              pullOnLoad(param);
            }
          }
        }
      });
    }

    //上拉加载函数,ajax
    function pullOnLoad(args) {
      console.log(args)
      setTimeout(function () {
        $.post("[[@{/apiMoment/listMomentForPerson}]]", {
          page: args.page,
          rows: args.rows,
          viewType: args.viewType,
          beViewUserId: args.beViewUserId
        }, function (data) {
          var data = JSON.parse(data);
          if (data.ret == "0") {
            var data_length = data.momentList.length;
            addNum = data_length;
            if (data_length <= 0) {
              $(".pullUp").html("已经没有了");
            } else {
              //渲染列表模板
              var homelList = template("homeList", data);
              $(".ltx_home_list .list").append(homelList);
              //只要不是列表的前三个都要显示按钮打开app
              $(".ltx_home_list .list .item:nth-child(-n+3) .cover").find(".play_app").remove();

              if (data_length < 10) {
                $(".pullUp").html("已经没有了")
              } else {
                $(".pullUp").html("上拉加载")
              }
            }
            //重置列表的高度
            picListHeight();
            myscroll.refresh();
          } else {
            layer.open({
              content: data.msg
              , skin: 'msg'
              , time: 2 //2秒后自动关闭
            });
          }
        })

      }, 1000);
    }
  })

  //头部用户信息
  function userInfo(arg) {
    $.post("[[@{/apiUser/userIndex}]]", {beViewUserId: arg}, function (data) {
      var data = JSON.parse(data);
      if (data.ret == "0") {
        console.log(data)
        var userInfo = template("userInfo", data);
        var buttonFixed = template("buttonFixed", data);
        $(".ltx_user_info").html(userInfo);
        $(".button_fixed .ltx_navigation").html(buttonFixed)
      } else {
        //提示
        layer.open({
          content: data.msg
          , skin: 'msg'
          , time: 2 //2秒后自动关闭
        });
      }
    })
  }

  // 图片列表的高度
  function picListHeight() {
    // 列表的高度，宽高1比1.3
    var height = 1.3 * ($(".ltx_home_list .list .item").width());
    var marginBottom = $(".ltx_home_list .list .item").css("margin-right");
    $(".ltx_home_list .list .item").css("height", height);
    $(".ltx_home_list .list .item").css("margin-bottom", marginBottom);
  }
</script>

</html>